<template>
  <div>
    <a-modal v-model="showModal" @ok="confirmOk" @cancel="cancel" :title="titles" width="70%">
      <a-spin :spinning="loading">
        <a-form :form="form">
          <a-row :gutter="[24, 0]">
            <a-col :span="12">
              <a-form-item class="mb-15" label="活动名称" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入' }] }]"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item class="mb-15" label="活动时间" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-range-picker
                  format="YYYY-MM-DD"
                  v-decorator="['time', { rules: [{ required: true, message: '请输入' }] }]"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="[24, 0]">
            <a-col :span="12">
              <a-form-item class="mb-15" label="砍价起始价格" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input
                  v-decorator="['bargainFirstPrice', { rules: [{ required: true, message: '请输入' }] }]"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item class="mb-15" label="砍价底价" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input
                  v-decorator="['bargainMinPrice', { rules: [{ required: true, message: '请输入' }] }]"
                ></a-input>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="[24, 0]">
            <a-col :span="12">
              <a-form-item class="mb-15" label="最大助力次数" :label-col="labelCol" :wrapper-col="wrapperCol">
                <div style="display: flex">
                  <a-input
                    placeholder="请输入"
                    v-decorator="[
                      'helpMaxCount',
                      {
                        rules: [{ required: true, message: '请输入' }],
                      },
                    ]"
                    maxLength="30"
                  ></a-input>
                </div>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item class="mb-15" label="最大帮砍次数" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input
                  placeholder="请输入"
                  v-decorator="[
                    'bargainCount',
                    {
                      rules: [{ required: true, message: '请输入' }],
                    },
                  ]"
                  maxLength="30"
                ></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="[24, 0]">
            <a-col :span="12">
              <a-form-item class="mb-15" label="砍价的最小金额" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input
                  placeholder="请输入"
                  v-decorator="[
                    'randomMinPrice',
                    {
                      rules: [{ required: true, message: '请输入' }],
                    },
                  ]"
                  maxLength="30"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item class="mb-15" label="砍价的最大金额" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input
                  placeholder="请输入"
                  v-decorator="[
                    'randomMaxPrice',
                    {
                      rules: [{ required: true, message: '请输入' }],
                    },
                  ]"
                  maxLength="30"
                ></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="[24, 0]">
            <a-col :span="12">
              <a-form-item class="mb-15" label="总限购数量" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input
                  placeholder="请输入"
                  v-decorator="[
                    'totalLimitCount',
                    {
                      rules: [{ required: true, message: '请输入' }],
                    },
                  ]"
                  maxLength="30"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item class="mb-15" label="状态" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-switch
                  checked-children="已上架"
                  un-checked-children="未上架"
                  v-decorator="['status', { valuePropName: 'checked' }]"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="[24, 0]">
            <a-col :span="12">
              <a-form-item class="mb-15" label="活动库存" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input
                  v-decorator="[
                    'stock',
                    {
                      rules: [{ required: true, message: '请输入' }],
                    },
                  ]"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item class="mb-15" label="选择商品" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input
                  v-decorator="[
                    'spuName',
                    {
                      rules: [{ required: true, message: '请输入' }],
                    },
                  ]"
                  disabled
                ></a-input>
                <a-button @click="selectGoods()" type="primary"> 选择 </a-button>
              </a-form-item>
              <GoodsList ref="goodsList" @choose="choose_goods"></GoodsList>
            </a-col>
          </a-row>
        </a-form>
      </a-spin>
    </a-modal>
  </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { get } from 'lodash'
import { getSpugetdetail, updateBargain, createBargain } from '@/api/newPet'
import GoodsList from '@/components/GoodsList/index.vue'
import dayjs from 'dayjs'
export default {
  data() {
    return {
      loading: false,
      isShow: true,
      skuId: 0,
      spuId: 0,
      labelCol: {
        span: 8,
      },
      content: '<p>Hello World!</p>',

      editorOption: {
        placeholder: '请输入',
        theme: 'snow',
        modules: {
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
              ['blockquote', 'code-block'], // 引用  代码块
              [
                {
                  header: 1,
                },
                {
                  header: 2,
                },
              ], // 1、2 级标题
              [
                {
                  list: 'ordered',
                },
                {
                  list: 'bullet',
                },
              ], // 有序、无序列表
              [
                {
                  script: 'sub',
                },
                {
                  script: 'super',
                },
              ], // 上标/下标
              [
                {
                  indent: '-1',
                },
                {
                  indent: '+1',
                },
              ], // 缩进
              // [{ direction: 'rtl' }], // 文本方向
              [
                {
                  size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'],
                },
              ], // 字体大小
              [
                {
                  header: [1, 2, 3, 4, 5, 6],
                },
              ], // 标题
              [
                {
                  color: [],
                },
                {
                  background: [],
                },
              ], // 字体颜色、字体背景颜色
              // [{ font: ['songti'] }], // 字体种类
              [
                {
                  align: [],
                },
              ], // 对齐方式
              ['clean'], // 清除文本格式
              ['image'], // 链接、图片，需要视频的可以加上video
            ],
          },
        },
      },
      data: [
        {
          name: '规格1',
          img: '',
          num: 1,
          price: 0,
        },
        {
          name: '规格1',
          img: '',
          num: 1,
          price: 0,
        },
      ],
      columns: [
        {
          title: '规格名称',
          dataIndex: 'name',
          align: 'center',
          width: 140,
          scopedSlots: {
            customRender: 'name',
          },
        },
        {
          title: '规格图片',
          dataIndex: 'img',
          width: 120,
          align: 'center',
          scopedSlots: {
            customRender: 'img',
          },
        },
        {
          title: '规格库存',
          dataIndex: 'num',
          align: 'center',
          width: 70,
          scopedSlots: {
            customRender: 'num',
          },
        },
        {
          title: '规格价格（元）',
          dataIndex: 'price',
          align: 'center',
          width: 80,
          scopedSlots: {
            customRender: 'price',
          },
        },
        {
          title: '砍价最高可售库存',
          dataIndex: 'msNum',
          align: 'center',
          width: 90,
          scopedSlots: {
            customRender: 'price',
          },
        },
        {
          title: '砍价最低价格（元）',
          dataIndex: 'msPrice',
          align: 'center',
          width: 110,
          scopedSlots: {
            customRender: 'price',
          },
        },
        // 查看显示
        {
          title: '砍价销量',
          dataIndex: 'sales',
          align: 'center',
          width: 90,
          scopedSlots: {
            customRender: 'sales',
          },
        },
        {
          title: '操作',
          fixed: 'right',
          dataIndex: 'action',
          width: 110,
          scopedSlots: {
            customRender: 'action',
          },
          align: 'center',
        },
      ],

      wrapperCol: {
        span: 16,
      },
      details: {},
      showModal: false,
      titles: '新增',
      info: {},
      form: this.$form.createForm(this),
    }
  },
  computed: {},
  watch: {},
  async created() {},
  components: {
    quillEditor,
    GoodsList,
  },
  methods: {
    // 选择商品
    selectGoods() {
      this.$refs.goodsList.open()
    },
    onEditorBlur(quill) {
      console.log('editor blur!', quill)
    },
    // 获得焦点事件
    onEditorFocus(quill) {
      console.log('editor focus!', quill)
    },
    // 准备富文本编辑器
    onEditorReady(quill) {
      console.log('editor ready!', quill)
    },
    // 内容改变事件，只需要这一个方法就够了
    onEditorChange({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
      this.content = html
    },
    formgetFileLength(type) {
      //获取图片
      return get(this.form.getFieldValue(type), 'length') || 0
    },
    formuploadSuccess(data, type) {
      this.form.setFieldsValue({
        [type]: [data.path],
      })
    },
    changeSelect(e) {
      console.log(e)
    },
    onChange(e) {
      console.log(e.target.value)
    },
    cancel() {
      this.form.resetFields()
      this.showModal = false
    },
    confirmOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          // this.loading = true
          const { info } = this
          if (values.time) {
            values.startTime = this.$utils.getStartTime(values.time[0])
            values.endTime = this.$utils.getEndTime(values.time[1])
          }
          let data = {
            id: info && info.id ? info.id : undefined,
            ...this.$utils.trimValue(values),
            isEnabled: typeof values.isEnabled === 'undefined' ? true : values.isEnabled,
            spuId: this.spuId,
            skuId: this.skuId,
            // startTime: values.time[0],
            // endTime: values.time[1],
          }
          if (this.titles == '新增') {
            createBargain(data)
              .then(() => {
                this.$message.success(info && info.id ? '修改成功！' : '新增成功！')
                this.$emit('upload')
                this.cancel()
              })
              .finally(() => {
                this.loading = false
              })
          } else {
            updateBargain(data)
              .then(() => {
                this.$message.success(info && info.id ? '修改成功！' : '新增成功！')
                this.$emit('upload')
                this.cancel()
              })
              .finally(() => {
                this.loading = false
              })
          }
        }
      })
    },
    getData() {
      this.loading = true
      deductionDetail({
        id: 1,
      })
        .then((data) => {
          this.details = data
        })
        .finally(() => (this.loading = false))
    },
    open(data) {
      this.info = data
      console.log(data, '111111')
      if (data.id) {
        this.titles = '修改'
        this.spuId = data.spuId
        this.skuId = data.skuId
      } else {
        this.titles = '新增'
      }
      this.showModal = true
      // images:['https://img2.baidu.com/it/u=1906732828,3160455141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666']
      this.$nextTick(() => {
        this.form.setFieldsValue({
          isEnabled: true,
          ...data,
          time: data.id?[dayjs(data.startTime).format('YYYY-MM-DD'), dayjs(data.endTime).format('YYYY-MM-DD')]:[],
        })
      })
    },
    choose_goods(e) {
      console.log(e, 'choose_goods')
      if (e.id) {
        getSpugetdetail({
          id: e.id,
        }).then((res) => {
          this.form.setFieldsValue({
            spuName: res.name,
          })
          console.log(res)
          this.spuId = res.id
          this.skuId = res.skus[0].id
          console.log(this.form.getFieldValue('spuId'))
          this.data = res.skus
        })
      }
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .ant-form-item-label {
  // width: 100px;
}
</style>